<div class="container">
    <div class="row">
        <div class="col-lg-5 logoStyle"><img src="../img/logoTransparent.png"></div>
        <div class="col-lg-2 text-primary registerWord">欢迎注册</div>
        <div class="col-lg-2 pull-right">已有账号 <a href="#" class="registerWord">请登录</a></div>
    </div>
    <div class="row">
        <form id="userRegisterForm" role="form" novalidate>
            <div class="row">
                <div class="form-group col-lg-6">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名" required name="username"
                           ngModel (ngModelChange)="user.username=$event" #username="ngModel"
                           [ngClass]="styleNgClassContainer.usernameClass"
                           autocomplete="off" #inputCheck
                           [usernameValidator]="username.value" (verifyResponse)="displayUsernameVerifyResult($event)"/>
                    <div [hidden]="validateMessageContainer.usernameMsg.result"
                         class="alert alert-danger">
                        {{validateMessageContainer.usernameMsg.msg}}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-lg-6">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password" placeholder="请输入密码" required
                           name="password" autocomplete="off" #inputCheck
                           ngModel (ngModelChange)="user.password=$event" #password="ngModel"
                           [ngClass]="styleNgClassContainer.passwordClass"
                           [passwordValidator]="[password.value,retryPass]"
                           (verifyResponse)="displayPasswordVerifyResult($event)"/>
                    <div [hidden]="validateMessageContainer.passwordMsg.result"
                         class="alert alert-danger">
                        {{validateMessageContainer.passwordMsg.msg}}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-lg-6">
                    <label for="retryPass">确认密码</label>
                    <input type="password" class="form-control" id="retryPass" placeholder="请再次输入密码" required
                           name="retryPass" #retryPass autocomplete="off" #inputCheck
                           ngModel #retryPassModel="ngModel" [ngClass]="styleNgClassContainer.retryPassClass"
                           [retryPassValidator]="[retryPassModel.value,password.value]"
                           (verifyResponse)="displayRetryPassVerifyResult($event)"/>
                    <div [hidden]="validateMessageContainer.retryPassMsg.result"
                         class="alert alert-danger">
                        {{validateMessageContainer.retryPassMsg.msg}}
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="form-group col-lg-6">
                    <label for="phone">电话号码</label>
                    <input type="text" class="form-control" id="phone" placeholder="请输入手机号码" required
                           name="phone" autocomplete="off" #inputCheck
                           ngModel (ngModelChange)="user.phone=$event" #phoneNgModel="ngModel"
                           [ngClass]="styleNgClassContainer.phoneClass"
                           [phoneValidator]="phoneNgModel.value"
                           (verifyResponse)="displayPhoneVerifyResult($event)"/>
                    <div [hidden]="validateMessageContainer.phoneMsg.result"
                         class="alert alert-danger">
                        {{validateMessageContainer.phoneMsg.msg}}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-lg-6">
                    <button type="button" class="btn btn-default" (click)="register()">注册</button>
                </div>
            </div>
        </form>
    </div>
</div>